<template>
    <!-- <div v-if="isRendered" class="chart-container">
      <div class="chart-item" id="aaa" >
        <div id="pieChart" style="width: 600px; height: 400px;" class="chart"></div>
      </div>
      <div class="chart-item">
        <div id="lineChart" class="chart"></div>
      </div>
      <div class="chart-item">
        <div id="barChart" class="chart"></div>
      </div>
    </div> -->
    <div id="lineChart" class="chart"></div>
  </template>
  
  <script>
//   import * as echarts from 'echarts';
    
  export default {
    name:"Table",
    data(){
        return {
            isRendered: false,
        }
    },
    mounted() {
        this.isRendered = true;
      this.createPieChart();
      this.createLineChart();
      this.createBarChart();
    },
    methods: {
      
      createPieChart() {
        const lineChart = echarts.init(document.getElementById("lineChart"));
        const lines = {
            series: [
            {
                type: 'pie',
                data: [
                { value: 2, name: '智慧猪圈' },
                { value: 2, name: '郑州智慧大棚' },
                { value: 1, name: '智慧鱼塘' },
                { value: 3, name: '智慧家居' },
                { value: 5, name: '通信网关' },
                { value: 1, name: '智慧果园' },
                { value: 1, name: '武汉大棚' },
                { value: 1, name: '武汉小棚' }
                ]
            }
            ]
        };
        lineChart.setOption(lines);
        
        // pieChart.setOption({
        //   // ... 饼状图的配置和数据设置
        // });
      },
      createLineChart() {
        // const lineChart = echarts.init(document.getElementById('lineChart'));
        // lineChart.setOption({
        //   // ... 折线图的配置和数据设置
        // });
      },
      createBarChart() {
        // const barChart = echarts.init(document.getElementById('barChart'));
        // barChart.setOption({
        //   // ... 柱状图的配置和数据设置
        // });
      }
    }
  };
  </script>
  
  <style scoped>
  .chart-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80vh;
    padding: 20px;
    background-color: #f4f4f4; /* 设置背景色 */
  }
  
  .chart-item {
    flex: 1;
    margin: 20px;
  }
  
  .chart {
    width: 100%; /* 设置图表宽度 */
    height: 100%; /* 设置图表高度 */
  }
  
  /* CSS样式，可以根据需求进行调整 */
  .chart-container {
    background: linear-gradient(135deg, #232526, #414345); /* 使用渐变背景色 */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  }
  
  .chart {
    border-radius: 10px;
    overflow: hidden;
  }
  </style>